画像の周りをうまいことテキストが囲うようにレイアウトされているホームページがありますが、あれってどうやるんだろう？あれこれ調査＆実験してみました。ついでにスタイルのテストに便利な「タグの中に直接スタイルを記述する」方法とか。

画像の横にテキストがあるとカッコいい！

ホームページを作り始めたのは10年以上前ですが、記憶だと簡単には画像の横にテキストを何行も表示させることはできなかったような記憶があります。しかし、時代は変わってスタイルシートによる書式設定の幅がぐっと広がり、いろいろなことができるようになっているようです。

本記事でちょっとやってみたかったことは以下のことです。

画像の下にテキストがある場合

特にスタイルシートの細かな設定をせず、スタンダードで使いやすいレイアウトですが、単純に画像の下にテキストがある場合です。WordPressでも、大抵のテーマで普通に画像を挿入してテキストを書くと、こうなると思います。

画像の横にテキストがある場合

新聞っぽいレイアウトとでもいえばいいでしょうか？画像があってその横にテキストが配置されており、画像横に納まりきらないテキストは画像の下に表示されます。

こちらはテキストを右側に配置したパターンです。

SiSO-LABブログ内にも既にあったのね

SiSO-LABでは、結果よりも経過を見て楽しんでいただくことをコンセプトとしておりますので、ここからは少し回りくどく解説していきます。

以前、「Wordpress Populor Posts」というプラグインをインストールし、人気記事をサイドバーに表示するようにしました。目的はもちろん人気記事を表示させることですが、こっそりとした目的は、引越インポートによって書式の崩れている過去の修正優先順位を付けるということもあります。

で、これの表示を見ていたら、しっかりとサムネイルのまわりをテキストが回りこんでいるのを発見しました。Firefoxでソースを表示させてみたところ、「wpp-thumbnail」というスタイルクラスがIMGタグに定義されていることがわかりました。

「wpp-thumbnail」ってどこにあるの？

WordPress Populor Posts内を探してみる

というわけで、プラグイン「WordPress Populor Posts」がインストールされているフォルダを検索してみました。WordPressのプラグインは、SiSOが知る限りの話ですが、PHPで書かれていてスタイルシートもテキストファイルです。従って、テキストとしてGrep等を使い文字列検索すれば見つかりそうです。

「WordPress Populor Posts」はWordPressがインストールされている「wp-content/plugins」フォルダ内にありますので、ここで階層フォルダも含めてCSSという拡張子を持つファイル内をSakura EditorでGrep検索します。

「wpp.css」というファイル内にて発見

ということであっさり「wpp-thumbnail」を見つけることができました。「wordpress-popular-posts/style」内に「wpp.css」というファイルがあり、その中に記述されていました。

/* thumbnail styles */
.wpp-thumbnail {
    display:inline;
    float:left;
    margin:0 5px 0 0;
    border:none;
}

これによれば、どうやら「float:」を指定するのがポイントのようです。

HTMLタグの中で調節スタイルシートを指定する

かっちりとスタイルシートを指定していくのであれば、CSSファイルに記述して、というのが最も適切な方法かと思いますが、とりあえずテストということでimg（HTMLタグ）内にて直接指定してみました。「style=」に続けて記述することで、一時的にタグ内で有効なスタイルシートの指定をすることができます。

これが先ほどのサンプル画像のソースコードになります。

画像の右側からテキストを回り込ませる方法

「img」タグの後半で「style=”float:left; margin:0 5px 0 0;”」という指定をしていますが、ポイントは「style=”float:left”」です。これによって、画像を「浮いた状態」で左寄せしています。

「border」は好みで指定すればよいですが、何もなしでやったら詰まり過ぎてカッコ悪かったので、とりあえず「WordPress Populor Posts」で指定しているのと同じパラメータを指定しました。

<img src="http://localhost/wp-content/uploads/2014/07/alc-grv-stove-valiable-failure-01.jpg" alt="スタンレー＆アルコールストーブお茶セット" width="270" height="202" style="float:left; margin:0 5px 0 0;" />

画像の左側からテキストを回り込ませる方法

こちらは画像を右側に配置し、左側からテキストを表示開始して回り込み表示させるサンプルコードです。

<img src="http://localhost/wp-content/uploads/2014/07/alc-grv-stove-valiable-failure-01.jpg" alt="スタンレー＆アルコールストーブお茶セット" width="270" height="202" style="float:right; margin:0 5px 0 0;" />

今日の一言二言三言

• 画像回り込みテキストの指定は「float」
• タグ中で一時的にスタイルシートを使うには「style」

ふむふむ、また１つ、スタイルシートへの理解が深まりました。なかなか一気にとは行きませんが、ぼちぼちっとカスタマイズを継続したいと思います。